<template>
  <div class="to-sign-up">
    <br />
    <div class="res-add-one">
      <div class="header_2">
        <ul>
          <li><div class="head-font"></div></li>
          <li><p>&nbsp; 服务包详情</p></li>
        </ul>
      </div>
<!-------------------------------------------第一个表格---------------------------------------------->
 <div class="old-service-pack">
   <div class="oldImg">
    <img width="336px" height="260px"  src="u6881.png" alt="">
   </div>

<div class="old-title">
   <div class="ul-first">     
     <div style="float:left;">儿童包&nbsp; &nbsp;</div>
     <div class="circle-one"> &nbsp; 基础包</div>
    </div>
       <el-form :inline="true" :model="form" label-width="100px" >
       <!------------------第二个表格第一行------------------------>
   <div class="old-from-one">
          <div>
      <el-form-item label="加入团队">
        <span style="color:#fa746b;"> ¥120</span>
      </el-form-item>
        </div>

      </div>
 <!------------------第二个表格第二行------------------------>
 <div class="old-from-one">
          <div>
      <el-form-item label="标签" style="text-align:center;">
                    <div class="circle-four"><div style="margin-top:-5px;">慢病管理</div></div>
                    <div class="circle-two"><div style="margin-top:-5px;">儿童护理</div></div>
                    <div class="circle-three"><div style="margin-top:-5px;">0-6岁的儿童</div></div>

      </el-form-item>
        </div>
      </div>
       <!------------------第二个表格第三行------------------------>
 <div class="old-from-one">
          <div>
      <el-form-item label="服务对象">
        <span>0-6岁的儿童</span>
      </el-form-item>
        </div>
      </div>
       <!------------------第二个表格第四行------------------------>
 <div class="old-from-one">
          <div>
     <el-form-item label="签约周期">
        <span>1年（可续签）</span>
      </el-form-item>
        </div>
      </div>
         <!------------------第二个表格第五行------------------------>
 <div class="old-from-one">
 
        <el-form-item label="服务介绍">
            <div style="width:580px;">主要以基本医疗服务和公共卫生服务为主，如部分常见病或 多发病的治疗和用药指导、重症的就医指导和转诊预约、居民健康档案的管理和 慢病管理指导等。</div>
      </el-form-item>
        </div>

          
    </el-form>
</div>
    
    
</div>
<br>
<br>
 <span>&nbsp; &nbsp; &nbsp; &nbsp; 服务项目</span>   
 <br>
 <br>
<div class="form-pep">
      <el-table
        :data="list"
        v-loading="tableLoading"
        tooltip-effect="dark"
        style="width: 95%; margin: 0 auto"
        :header-cell-style="{ background: '#F2F2F27F', color: '#606266' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="项目编号" prop="residenceNum" width="140" align="center"> 
        </el-table-column>
        <el-table-column label="项目名称" prop="residenceName" width="160" align="center">
        </el-table-column>
        <el-table-column label="次数" width="140" prop="residenceIdCard" align="center">
        </el-table-column>
        <el-table-column label="项目类型" prop="residencePhone" width="140" align="center">
        </el-table-column>

        <el-table-column label="项目介绍" prop="state" width="470" align="center">
        </el-table-column>       
      </el-table>
    </div>

  <br>
  <br>
       <div class="pack-form">

       <p style="padding:10px 20px;"><span >服务详情字段</span></p>
        <div style="width:100%;border-top:1px solid #f2f7fb;">
    <br>
   <el-form :inline="true" :model="form" label-width="100px" >
       <!------------------第二个表格第一行------------------------>
   <div class="add-from-one">
          <div>
      <el-form-item label="舒张压">
            <el-input  placeholder="请输入"></el-input>
            
      </el-form-item>
       <font style='line-height:30px;font-size:15px;'>mmHg</font>
        </div>

      </div>
 <!------------------第二个表格第二行------------------------>
     <div class="add-from-one">
              <div class="item-count">
      <el-form-item label="收张压"  >
             <el-input  placeholder="请输入"></el-input>
            
      </el-form-item>
       <font style='line-height:30px;font-size:15px;'>mmHg</font>
      </div>
      </div>
 <!------------------第二个表格第三行------------------------>

        <div class="add-from-one">
              <div class="item-count">
      <el-form-item label="症状"  >
              <el-input  placeholder="请输入" style="width:585px;"></el-input>
      </el-form-item>
      </div>
      </div>
<!------------------第二个表格第三行------------------------>

   <div class="add-from-one">
              <div class="item-count">
      <el-form-item label="健康指导"  >
              <el-input  placeholder="请输入" style="width:585px;"></el-input>
      </el-form-item>
      </div>
      </div>
<!------------------第二个表格第四行------------------------>

   <div class="add-from-one">
              <div class="item-count">
      <el-form-item label="备注"  >
              <el-input  placeholder="请输入" style="width:585px;"></el-input>
      </el-form-item>
      </div>
      </div>
    </el-form>
  
        </div>
 

 </div>
 <br>
<br>
<span>&nbsp; &nbsp; &nbsp; 编辑记录</span>
<br>
<br>      
<div style="height: 300px;width:98%;margin:0 auto;border-bottom:1px solid #f2f7fb;">
  <el-steps direction="vertical" :active="1" style="margin-left:20px;">
    <el-step title="审核通过" description="操作人：王敏     操作时间：2021年9月15日 10:13"></el-step>
    <el-step title="编辑服务包" description="操作人：王敏     操作时间：2021年9月15日 10:13"></el-step>
    <el-step title="新增服务包" description="操作人：王敏     操作时间：2021年9月15日 10:13"></el-step>
    <br>
  </el-steps>
</div>
<br>
  <div  class="res-button">
      <el-button type="primary" @click="save" size="medium">编辑</el-button>
      <el-button style="background-color:#fa746b;color:#fff;" size="medium">停用</el-button>
      <el-button   size="medium">返回</el-button>
    </div>
    <br>

    </div>

<br>
<br>

  </div>


</template>



<script>
import axios from 'axios'
export default {
    name: "eCharts",
/***echarts   ** */    
mounted(){
let _this = this;
    const {month,lineData,barData1,barData2,barData3} = _this;
    _this.drawLine(month,lineData,barData1,barData2,barData3);
    setTimeout(function (){   // 随着页面自适应
        window.onresize = function () {
          _this.eChart.resize();
        }
    },200)
    },
created () {
  this.load();  
},
data () {
    return {

        params:{

        },
        list:[],
        sta:true,
      receiveId:"",//接收传过来的Id
      selectMemeber: ['王浩', '胡曼', '李维',],
     relation:["配偶","子女","父母","兄弟","长辈"],
     options:{}, 

    }
    
},

methods: {
 load() {
      // this.params.endDate=this.payTime[1]
      // this.params.statDate=this.payTime[0]
      //查询所有的居民信息
      axios({
        url: "/api/residence/getResidenceList",
        method: "GET",
        params: this.params,
      }).then((res) => {
        console.log(res);
        this.list = res.data.data;
      });
    },
    }
  };
</script>


<style>


.pack-form{
    width:70%;
padding-bottom:1cm ;

box-shadow: 0px 0px 10px rgb(41 132 248 / 10%);
   margin: 0 auto;
/* background-color: red; */
}
.old-from-one{
      width:700px;
margin-top:-5px ;

margin-left: -20px;

}
        .circle-four{
          margin-top:5px;
            width: 60px;
            /* background-color: #6c76f4; */
            /* background-color: #fa746b; */
            /* background-color: #fddb78; */
            background-color: rgba(255, 0, 0, 0.3);
            height: 22px;
            border-radius: 30px;
            color: #fff;
            float: left;font-size: 12px;
        }
        .circle-two{
          margin-top:5px;
            width: 60px;
            /* background-color: #6c76f4; */
            /* background-color: #fa746b; */
            /* background-color: #fddb78; */
            background-color: rgba(0, 0, 255, 0.3);

            height: 22px;
            border-radius: 30px;
            color: #fff;
            margin-left: 15px;
            float: left;font-size: 12px;
        }
        .circle-three{
          margin-top:5px;
          margin-left: 10px;
            width: 70px;
            /* background-color: #6c76f4; */
            /* background-color: #fa746b; */
            /* background-color: #fddb78; */
            background-color: rgba(0, 150, 0, 0.3);
            height: 20px;
            border-radius: 30px;
            float: left;
            color: #fff;
            font-size: 12px;
        }
        .ul-first{
            width: 170px;
            height: 30px;
            /* background-color: black; */


        }
        .circle-one{
          padding-top:5px;
            width: 50px;
            /* background-color: #6c76f4; */
            /* background-color: #fa746b; */
            /* background-color: #fddb78; */
            background-color: #FDDB78;
            height: 20px;
            border-radius: 30px;
color: #fff;
font-size: 12px;
            float: left;
        }

        .circle-one font{
            color: #fff;
            font-size:10px;


        }
body{
  height:100%;
  background-color: #f2f7fb;
}
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
.res-add-one {
  width: 1150px;
  

margin: 0 auto;

  background-color:#fff;
}
/**标题蓝色部分 *************/
.header_2 ul {
  width: 160px;
  height: 50px;
  /* background-color: black; */
  /**设置成为弹性容器**/
  display: flex;
  padding-top: 20px;
  margin-left: 30px;

}
.header_2 ul p {
  font-size: 22px;
}
.head-font {
  background-color: #0066ff;
  width: 7px;
  height: 25px;
  border-radius: 10px;
}
/*********底部表格******** */
.res-add{
    width:95%;
/* background-color: red; */

    margin:0 auto;
   border-bottom:1px solid #f2f7fb;
   border-top:1px solid #f2f7fb;

}
.old-service-pack{
   width:95%;
background-color: #f2f7fb;
height:300px;
    margin:0 auto;
}
.oldImg{
  margin-left:20px;
  margin-top:20px;
    width: 336px;
    height: 260px;
    float:left;
}
.old-title{
    margin-left:20px;
  margin-top:20px;
   width: 336px;
    height: 260px;

     float:left;
}
.service-add{
    width:95%;

    margin:0 auto;
}
.from-one{
      width:93%;


  display: flex;
   margin: 0 auto;

}
.item-count{
flex:1;
}
.head-span{
    margin-left:25px;
}
.res-button{
        width:95%;

   margin: 0 auto;
}

</style>